<template>
  <div class="app-container">
    <div
          id="InheritHeightCharts"
          v-loading="loading"
          :style="{width: '700px', height: '300px'}"
        ></div>

        <p></p>
        <div class="chart1_info">
          <div>{{reportComment}}</div>
          <div style="margin-top:30rpx">
            请持续每月给孩子测量身高,并录入评测.科学管理孩子
            身高,早日达到理想身高.
          </div>
        </div>
        <p></p>
        <div>
          <div>身高发育等级划分（SD为标准差,均值为中位线）：</div>
          <div>身高范围在 (+2SD)以上，为上等；</div>
          <div>身高范围在（+1SD~+2SD)，为中上等；</div>
          <div>身高范围在 (+1SD~-1SD)， 为中等；</div>
          <div>身高范围在（-1SD~-2SD)，为中下等；</div>
          <div>身高范围在（-2SD）以下，为下等；</div>
          <div style="font-size:22rpx;">数据来源《中华人民共和国卫生行业标准WS/T 612-2018》</div>
        </div>
  </div>
</template>

<script>
import { listChildHeightInheritCharts } from "@/api/child/height";

import echarts from "echarts"; 

export default {
  name: "inderitHeightCharts",
  props: {
    childId: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    childData: {
      type: Object,
      default: () => {
        return {
          ageNum: undefined,
          avatar: undefined,
          birthday: undefined,
          childId: undefined,
          childType: 1,
          familyCode: undefined,
          height: 0,
          heightDad: 0,
          heightInherit: 0,
          heightMum: 0,
          nickname: undefined,
          sex: 1,
          weight: 0
        };
      }
    }
  },
   
  data() {
    return {
      loading: false,
      reportComment:"",
     
    };
  },

  mounted() {
    this.getInheritChartData();
  },
  watch: {
    //监听子控件内容的改动,发送给父级组件
    childId: {
      handler(newValue, oldValue) {
        this.getInheritChartData();
      },
      deep: true
    }
  },
  methods: {
    getInheritChartData() {
      this.loading = true;
      let series_data = [];
      let xAxisData = [];
      listChildHeightInheritCharts(this.childId).then(response => {
        this.loading = false;
        this.reportComment = response.data.comment
        series_data = response.data.series_data;
        xAxisData = response.data.xaxis;

        // 基于准备好的dom，初始化echarts实例
        this.chart = echarts.init(
          document.getElementById("InheritHeightCharts")
        );

        let colors = [
          "rgb(131,198,40)",
          "rgb(106,211,187)",
          "rgb(247,80,67)",
          "rgb(245,217,106)",
          "rgb(125,187,230)",
          "rgb(238,176,96)",
          "rgb(203,17,17)"
        ];
        var option = {
          color: colors,
          legend: {
            data: ["+2SD", "+1SD", "均值", "-1SD", "-2SD", "实测", "遗传"],
            icon: "roundRect",
            bottom: 0,
            itemWidth: 20,
            itemGap: 15,
            selected: {
              "+2SD": false,
              "+1SD": true,
              实测: true,
              "-1SD": true,
              "-2SD": false,
              遗传: true,
              均值: false
            }
          },

          grid: {
            top: "9%",
            left: "8%",
            right: "1%",
            bottom: "22%"
          },
          parallel: {
            bottom: "22%"
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLine: {
              onZero: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 11,
                color: "#4b4b4b"
              }
            },
            // type: 'category',
            data: xAxisData
          },
          yAxis: [
            {
              max: function(value) {
                return parseInt(value.max) + 8;
              },
              min: function(value) {
                return parseInt(value.min) - 22;
              },
              type: "value",
              name: "CM",
              axisLabel: {
                textStyle: {
                  fontSize: 11,
                  color: "#4b4b4b"
                }
              },
              nameTextStyle: {
                padding: [0, 35, 0, 0],
                color: "#4b4b4b",
                fontSize: 11
              },
              splitLine: {
                lineStyle: {
                  color: ["rgba(204,204,204,0.4)"],
                  type: "dotted"
                }
              }
            }
          ],
          series: [
            // data: res.data.data.series_data
            {
              name: "实测",
              type: "line",
              smooth: true,
              connectNulls: true,
              data: series_data.height,
              symbolSize: "5",
              lineStyle: {
                normal: {
                  width: 4
                  // shadowColor: 'rgba(0,0,0,0.34)',
                  // shadowBlur: 3,
                  // shadowOffsetY: 3
                }
              }
            },
            {
              name: "遗传",
              type: "line",
              smooth: true,
              connectNulls: true,
              data: series_data.heightInherit,
              symbolSize: "0.5",
              lineStyle: {
                normal: {
                  width: 1.5
                }
              }
            },
            {
              name: "+2SD",
              type: "line",
              smooth: true,
              connectNulls: true,
              data: series_data.positive2sd,
              symbolSize: "0.5",
              lineStyle: {
                normal: {
                  width: 1.5
                }
              }
            },
            {
              name: "+1SD",
              type: "line",
              smooth: true,
              connectNulls: true,
              data: series_data.positive1sd,
              symbolSize: "0.5",
              lineStyle: {
                normal: {
                  width: 1.5
                }
              }
            },
            {
              name: "均值",
              type: "line",
              smooth: true,
              connectNulls: true,
              data: series_data.median,
              symbolSize: "0.5",
              lineStyle: {
                normal: {
                  width: 1.5
                }
              }
            },
            {
              name: "-1SD",
              type: "line",
              smooth: true,
              connectNulls: true,
              data: series_data.negative1sd,
              symbolSize: "0.5",
              lineStyle: {
                normal: {
                  width: 1.5
                }
              }
            },
            {
              name: "-2SD",
              type: "line",
              smooth: true,
              connectNulls: true,
              data: series_data.negative2sd,
              symbolSize: "0.5",
              lineStyle: {
                normal: {
                  width: 1.5
                }
              }
            }
          ],
          tooltip: {
            trigger: "axis",
            position: [35, 8],
            formatter: function(params) {
              let list = params.length;
              let txt = params[0].name + "\n";
              for (var i = 0; i < list; i++) {
                if (i < list - 1) {
                  txt += `${params[i].seriesName}:${
                    params[i].data == null ? "无数据" : params[i].data
                  }\n`;
                } else {
                  txt += `${params[i].seriesName}:${
                    params[i].data == null ? "无数据" : params[i].data
                  }`;
                }
              }
              return txt;
            }
          }
        };

        this.chart.setOption(option);
      });
    }
  }
};
</script>